<template>
  <div class="bottom">
    <div class="bottom_left">
      <i
        class="iconfont icon-shangyishou"
        @click="toggleSongPreOrNext('pre')"
      ></i>
      <i
        class="iconfont icon-zanting"
        v-if="playStoreIsPlaying"
        @click="isPlayingChange(1)"
      ></i>
      <i class="iconfont icon-bofang" v-else @click="isPlayingChange(2)"></i>

      <i
        class="iconfont icon-xiayishou"
        @click="toggleSongPreOrNext('next')"
      ></i>
    </div>
    <!-- 中间的部分 -->
    <div class="bottom_center">
      <div class="bottom_center_top">
        <div class="nameBox">
          <!-- 名字 -->
          <span class="name">{{ playStoreCurrentSong.name }}</span>
          &nbsp;- &nbsp;
          <!-- 作者 -->
          <div class="author">
            <div v-for="item in playStoreCurrentSong.ar" :key="item.id">
              <i>{{ item.name }}</i>
              <span>/</span>
            </div>
            <!-- <div v-for="item in playStoreCurrentSong.ar" :key="item.id">
              <i>{{ item.name }}</i>
              <span>/</span>
            </div> -->
          </div>
        </div>
        <!-- 实时的进度 和 总时长 -->
        <div class="time">
          <span>{{ realDuration }}</span>
          <i>/</i>
          <span>{{ formatDt(playStoreCurrentSong.dt) }}</span>
        </div>
      </div>
      <!-- 歌曲播放进度的 滑块 -->
      <!-- input 是用户在滑块中 拖拽的时候触发的 -->
      <!-- change是用户在滑块中 点击并且松手 -->
      <el-slider
        v-model="songProgress"
        :show-tooltip="false"
        @change="songProgressChange"
      ></el-slider>
    </div>
    <!-- 右边的部分 -->
    <div class="bottom_right">
      <div class="sequence">
        <i
          @click="toggleSequenceClick"
          v-if="playStoreSequence == 0"
          class="iconfont icon-shunxu"
        ></i>
        <i
          @click="toggleSequenceClick"
          v-if="playStoreSequence == 1"
          class="iconfont icon-suiji"
        ></i>
        <i
          @click="toggleSequenceClick"
          v-if="playStoreSequence == 2"
          class="iconfont icon-danquxunhuan"
        ></i>
      </div>

      <i class="iconfont icon-xihuan"></i>
      <i class="iconfont icon-pinglun"></i>
      <i class="iconfont icon-xiazai1"></i>
      <!-- 静音和 非静音 -->
      <template>
        <i
          v-if="voiceFlag"
          class="iconfont icon-jiadayinliang"
          @click="voiceClick"
        ></i>
        <i v-else class="iconfont icon-guanbiyinliang" @click="voiceClick"></i>
      </template>
      <!-- 音量滑块 -->
      <div class="slider">
        <el-slider
          v-model="voiceProgress"
          :show-tooltip="false"
          @input="voiceProgressInput"
          @change="voiceProgressChange"
        ></el-slider>
        <!-- voiceProgressInput 是鼠标拖拽的时候，
          voiceProgressChange 是鼠标松开的时候
         -->
      </div>
    </div>
    <audio
      :src="playStoreSongurl"
      ref="songAudioRef"
      @timeupdate="songAudioUpdate"
      @ended="songAudioEnd"
    ></audio>
  </div>
</template>

<script>
import moment from "moment";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "bottom",
  components: {},
  data() {
    return {
      songProgress: 0, // 歌曲播放的 滑动条的进度
      voiceProgress: 100,
      realDuration: "00:00", // 中间右边的，实时播放到 那一秒的
      voiceFlag: true, // true 有声音
    };
  },
  computed: {
    ...mapState({
      playStoreSongurl: (state) => state.playerStore.songUrl,
      playStoreSonglist: (state) => state.playerStore.songsList,
      playStoreCurrentSongIndex: (state) => state.playerStore.currentSongIndex,
      playStoreCurrentSong: (state) => state.playerStore.currentSong,
      playStoreIsPlaying: (state) => state.playerStore.isPlaying,
      playStoreCurrentLyricIndex: (state) =>
        state.playerStore.currentLyricIndex,
      playStoreLyricY: (state) => state.playerStore.lyricY,
      playStoreLyricList: (state) => state.playerStore.lyricList,
      playStoreSequence: (state) => state.playerStore.sequence,
    }),
  },
  created() {},
  methods: {
    ...mapMutations("playerStore", [
      "changeSongsListMutations",
      "changeCurrentSongMutations",
      "changeSongUrlMutations",
      "changeLyricListMutations",
      "changeIsPlaying",
      "changeCurrentLyricIndexMutations",
      "changeLyricYMutations",
      "toggleSequence",
    ]),
    // 播放状态切换
    isPlayingChange(flag) {
      this.changeIsPlaying(!this.playStoreIsPlaying);
      if (flag === 2) {
        // 播放歌曲
        this.$refs.songAudioRef.play().then(
          () => {},
          (err) => {
            console.log(err);
          }
        );
      } else {
        // 暂停歌曲
        this.$refs.songAudioRef.pause();
      }
    },
    // 鼠标拖动的时候
    voiceProgressInput(value) {
      console.log("拖动", value);
      if (value == 0) {
        this.voiceFlag = false;
      } else {
        this.voiceFlag = true;
      }
      this.voiceProgress = value;
      this.$refs.songAudioRef.volume = value / 100;
    },
    voiceProgressChange(value) {
      if (value == 0) {
        this.voiceFlag = false;
      } else {
        this.voiceFlag = true;
      }
      this.voiceProgress = value;
      this.$refs.songAudioRef.volume = value / 100;
    },
    voiceClick() {
      if (this.voiceFlag) {
        this.voiceProgress = 0;
      } else {
        this.voiceProgress = 100;
      }
      this.voiceFlag = !this.voiceFlag;
    },
    songProgressChange(number) {
      console.log("歌曲进度 拖拽松开的时候", number);
      this.realDuration = moment(
        (number / 100) * this.playStoreCurrentSong.dt
      ).format("mm:ss");

      this.$refs.songAudioRef.currentTime =
        ((number / 100) * this.playStoreCurrentSong.dt) / 1000;

      this.songProgress = number;

      // 进行歌曲播放
      this.changeIsPlaying(true);
      this.$refs.songAudioRef.play().then(
        () => {},
        (err) => {
          console.log(err);
        }
      );
    },
    songAudioUpdate(e) {
      const currentTime = e.target.currentTime; // 这里返回的是 秒 当前播放到 什么时间了
      this.realDuration = moment(currentTime * 1000).format("mm:ss"); // 更新实时进度
      this.songProgress =
        ((currentTime * 1000) / this.playStoreCurrentSong.dt) * 100;

      // 处理歌词
      if (this.playStoreIsPlaying) {
        let i = 0;
        for (; i < this.playStoreLyricList.length; i++) {
          let lyricItem = this.playStoreLyricList[i];
          // console.log(lyricItem.content);
          if (currentTime * 1000 < lyricItem.time) {
            break; // 如果成立，那么就找到了，  这段时间 所在的 哪一个item
          }
        }
        if (this.playStoreCurrentLyricIndex !== i - 1) {
          this.changeCurrentLyricIndexMutations(i - 1);
          if (
            this.playStoreCurrentLyricIndex > 6 ||
            this.playStoreCurrentLyricIndex > this.playStoreLyricList.length - 6
          ) {
            this.changeLyricYMutations(
              -30 * (this.playStoreCurrentLyricIndex - 4)
            );
          }
        }
      }
    },
    songAudioEnd() {
      console.log("播放完成");
      if (this.playStoreSequence == 0) {
        // 如果正在的是 列表的最后一个 那就从第一个开始播放
        if (
          this.playStoreSonglist.length - 1 ==
          this.playStoreCurrentSongIndex
        ) {
          let id = this.playStoreSonglist[0].id;
          let link = this.$router.resolve({
            path: `/player/${id}`, //要跳转的路由
          });
          window.open(link.href, "player"); //打开新窗口
          sessionStorage.setItem("open", true);
        } else {
          // 不是最后一个的情况下
          let id =
            this.playStoreSonglist[this.playStoreCurrentSongIndex + 1].id;
          let link = this.$router.resolve({
            path: `/player/${id}`, //要跳转的路由
          });
          window.open(link.href, "player"); //打开新窗口
          sessionStorage.setItem("open", true);
        }
      } else if (this.playStoreSequence == 1) {
        let randomIndex = Math.floor(
          Math.random() * this.playStoreSonglist.length
        ); // 0-播放列表长度 中 随机的一个整数
        while (randomIndex == this.playStoreCurrentSongIndex) {
          randomIndex = Math.floor(
            Math.random() * this.playStoreSonglist.length
          );
        }
        let id = this.playStoreSonglist[randomIndex].id;
        let link = this.$router.resolve({
          path: `/player/${id}`, //要跳转的路由
        });
        window.open(link.href, "player"); //打开新窗口
        sessionStorage.setItem("open", true);
      } else {
        console.log("单曲循环");
        // let id = this.playStoreSonglist[this.playStoreCurrentSongIndex].id;
        // console.log(id);
        // let link = this.$router.resolve({
        //   path: `/player/${id}`, //要跳转的路由
        // });
        // window.open(link.href, "player"); //打开新窗口
        // sessionStorage.setItem("open", true);
        // this.$refs.songAudioRef.load();
        this.$refs.songAudioRef.play();
        this.changeLyricYMutations(0);
        this.changeCurrentLyricIndexMutations(0);
      }
    },
    // 切换上一首 下一首
    toggleSongPreOrNext(flag) {
      if (flag == "pre") {
        //  如果 现在播放的是 歌曲列表的第一首歌曲
        if (this.playStoreCurrentSongIndex == 0) {
          let id = this.playStoreSonglist[this.playStoreSonglist.length - 1].id;
          let link = this.$router.resolve({
            path: `/player/${id}`, //要跳转的路由
          });
          window.open(link.href, "player"); //打开新窗口
          sessionStorage.setItem("open", true);
        } else {
          let id =
            this.playStoreSonglist[this.playStoreCurrentSongIndex - 1].id;
          let link = this.$router.resolve({
            path: `/player/${id}`, //要跳转的路由
          });
          window.open(link.href, "player"); //打开新窗口
          sessionStorage.setItem("open", true);
        }
      } else {
        //  下一首
        // 如果 当前播放的就是  歌曲列表的最后一个歌曲
        if (
          this.playStoreCurrentSongIndex ==
          this.playStoreSonglist.length - 1
        ) {
          let id = this.playStoreSonglist[0].id;
          let link = this.$router.resolve({
            path: `/player/${id}`, //要跳转的路由
          });
          window.open(link.href, "player"); //打开新窗口
          sessionStorage.setItem("open", true);
        } else {
          let id =
            this.playStoreSonglist[this.playStoreCurrentSongIndex + 1].id;
          let link = this.$router.resolve({
            path: `/player/${id}`, //要跳转的路由
          });
          window.open(link.href, "player"); //打开新窗口
          sessionStorage.setItem("open", true);
        }
      }
    },
    // 切换播放状态的点击事件
    toggleSequenceClick() {
      this.toggleSequence();
    },
    formatDt(time) {
      return moment(time).format("mm:ss");
    },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  // 覆盖 slider 组件
  /deep/ .el-slider__bar {
    background-color: @globalColor;
  }
  /deep/ .el-slider__button {
    border: 2px solid @globalColor;
  }
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  z-index: 6;
  // background-color: #000;
  display: flex;
  align-items: center;
  .bottom_left {
    display: flex;
    align-items: center;
    width: 122px;
    i {
      font-size: 26px;
      cursor: pointer;
      &:hover {
        color: @globalColor;
      }
    }
    i:nth-child(2) {
      font-size: 50px;
      margin: 0 10px;
    }
  }
  .bottom_center {
    display: flex;
    flex: 1;
    // padding: 0 20px 0 30px;
    padding: 0 30px;
    flex-direction: column;
    .bottom_center_top {
      color: hsla(0, 0%, 88.2%, 0.8);
      display: flex;
      justify-content: space-between;
      .nameBox {
        display: flex;
      }
      .name {
        color: #ffffff;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
      }
      .author {
        display: flex;
        flex: 1;
        span {
          margin-left: 6px;
          margin-right: 6px;
        }
        i {
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
        > div:last-child {
          span {
            display: none;
          }
        }
      }
      .time {
        i {
          margin: 0 6px;
        }
      }
    }
  }
  .bottom_right {
    display: flex;
    .sequence {
      width: 50px;
    }
    i {
      font-size: 26px;
      margin-right: 18px;
      cursor: pointer;
      &:hover {
        color: @globalColor;
      }
    }
    .slider {
      width: 70px;
    }
  }
}
</style>
